import React, { useMemo } from "react"
import Page from "@/components/page";
import { View, Text } from "@tarojs/components";
import UserCard from "./userCard";
import viewMode from "@/store/viewMode";
import { observer } from "mobx-react";
import user from "@/store/user";
import Taro from "@tarojs/taro";
import http from "@/request";
import { HideLoading, ShowLoading, ShowToast, VibrateShort } from "@/utils";
import account from "@/store/account";

import "./index.scss"
import categorys from "@/store/categorys";

const Mine: React.FC = observer(() => {

    const setTheme = (val: string) => {
        VibrateShort()
        switch (val) {
            case 'night':
                viewMode.setNight(true)
                viewMode.setFllow(false)
                break
            case 'day':
                viewMode.setNight(false)
                viewMode.setFllow(false)
                break
            default:
                viewMode.setFllow(true)
        }
    }

    const setfontSize = (val: string) => {
        VibrateShort()
        viewMode.setfontSize(val)
    }

    const toPage = (url: string) => {
        Taro.navigateTo({
            url
        })
    }

    const switchIdentityCheck = () => {
        VibrateShort()
        const identityCheck = user.info?.identityCheck
        user.checkUserAuth(`${identityCheck ? '关闭' : '开启'}身份验证前，需要进行生物识别`, true).then(_ => {
            const value = identityCheck ? 0 : 1
            http.post('/user/modeSwitch', {
                value
            }).then(_ => {
                user.updateInfo({ ...user.info, identityCheck: value })
                ShowToast(`身份验证${identityCheck ? '关闭' : '开启'}成功`)
            }).catch(err => {
                ShowToast(err.msg || '操作失败')
                viewMode.setIsIdentityCheckWait(false)
            })
        }).catch(err => {
            ShowToast(err.msg)
            viewMode.setIsIdentityCheckWait(false)
        })
    }

    const currentCountMember = useMemo(() => {
        return (account.activeAccount?.members || []).find(item => {
            return item.userId === user.info?.id
        })
    }, [account.activeAccount])

    const switchMessageMode = () => {
        VibrateShort()
        Taro.showModal({
            title: '提示',
            content: `是否${currentCountMember?.notice ? '关闭' : '开启'}当前账本的记账通知？`,
            success: (res) => {
                if (res.confirm) {
                    ShowLoading()
                    http.post('/account-user/update', {
                        id: currentCountMember?.id,
                        notice: currentCountMember?.notice ? 0 : 1
                    }).then(_ => {
                        HideLoading()
                        account.doUpDateAccount()
                    }).catch(err => {
                        ShowToast(err.msg || '操作失败')
                    })
                } else if (res.cancel) {
                    console.log('用户点击取消');
                }
            }
        })
    }

    const switchRecordMode = (type: 'form' | 'chat') => {
        VibrateShort()
        viewMode.setRecordType(type)
    }

    const switchShakeMode = () => {
        VibrateShort()
        Taro.showModal({
            title: '提示',
            content: `是否${viewMode?.shakeAvailable ? '关闭' : '开启'}系统振动反馈？`,
            success: (res) => {
                if (res.confirm) {
                    viewMode.setshakeAvailable(!viewMode?.shakeAvailable)
                } else if (res.cancel) {
                    console.log('用户点击取消');
                }
            }
        })
    }

    const loginOut = () => {
        VibrateShort()
        Taro.showModal({
            title: '提示',
            content: `是否退出当前账号？`,
            success: (res) => {
                if (res.confirm) {
                    // user.updateInfo({})
                    Taro.setStorageSync('user-info', null)
                    Taro.reLaunch({
                        url: '/pages/login/index'
                    })
                } else if (res.cancel) {
                    console.log('用户点击取消');
                }
            }
        })
    }

    const toFuncPage = (url) => {
        VibrateShort()
        toPage(url)
    }

    return (
        <Page className="flex-column flex-item mine-page text-main-color">
            <UserCard></UserCard>
            <View className="page-body page-background need-filter flex1">
                <View className="info-label">常用功能</View>
                <View className="info-card card-background">
                    <View className="info-card-item flex-row flex-item" onClick={() => toFuncPage('/pages/report/index')}>
                        <Text className="info-card-item-icon font-size40 first-item iconfont icon-tubiao-bingtu"></Text>
                        <View className="info-card-item-content flex1">
                            <View className="info-item-content-title font-size24">记账报告</View>
                            <View className="info-item-content-desc font-size20">看看账本中那些有意思的统计</View>
                        </View>
                        <View className="to-more-btn font-size32 iconfont icon-base-right"></View>
                    </View>
                    <View className="bottom-line"></View>
                    <View className="info-card-item flex-row flex-item" onClick={() => toFuncPage('/pages/accounts/index')}>
                        <Text className="info-card-item-icon font-size40 second-item iconfont icon-jizhangben"></Text>
                        <View className="info-card-item-content flex1">
                            <View className="info-item-content-title font-size24">账本管理</View>
                            <View className="info-item-content-desc font-size20">
                                当前共有<Text className="account-num">{account.accountList?.length}</Text>个账本
                            </View>
                        </View>
                        <View className="to-more-btn font-size32 iconfont icon-base-right"></View>
                    </View>
                    <View className="bottom-line"></View>
                    <View className="info-card-item flex-row flex-item" onClick={() => toFuncPage('/pages/categorys/index')}>
                        <Text className="info-card-item-icon font-size40 third-item iconfont icon-leibiefenlei"></Text>
                        <View className="info-card-item-content flex1">
                            <View className="info-item-content-title font-size24">分类管理</View>
                            <View className="info-item-content-desc font-size20">
                                当前共有<Text className="account-num">{categorys.categoryList?.length}</Text>个记账分类
                            </View>
                        </View>
                        <View className="to-more-btn font-size32 iconfont icon-base-right"></View>
                    </View>
                    <View className="bottom-line"></View>
                    <View className="info-card-item flex-row flex-item">
                        <Text className="info-card-item-icon font-size40 fourth-item iconfont icon-shangchuan"></Text>
                        <View className="info-card-item-content flex1">
                            <View className="info-item-content-title font-size24">导入导出</View>
                            <View className="flex-row flex-item">
                                <View className="info-item-content-desc font-size20 flex1">
                                    请选择操作类型
                                </View>
                                <View onClick={() => toFuncPage('/pages/import/index')} className="oprate-btn font-size20">导入</View>
                                <View onClick={() => toFuncPage('/pages/export/index')} className="oprate-btn font-size20">导出</View>
                            </View>
                        </View>
                    </View>
                    <View className="bottom-line"></View>
                    <View className="info-card-item flex-row flex-item">
                        <Text className="info-card-item-icon font-size40 first-item iconfont icon-ai"></Text>
                        <View className="info-card-item-content flex1">
                            <View className="info-item-content-title font-size24">记账模式</View>
                            <View className="flex-row flex-item">
                                <View className="info-item-content-desc font-size20 flex1">
                                    切换记账页面的交互方式
                                </View>
                                <View onClick={() => switchRecordMode('chat')} className={`oprate-btn font-size20 ${viewMode.recordType === 'chat' ? 'active-item' : ''}`}>对话模式</View>
                                <View onClick={() => switchRecordMode('form')} className={`oprate-btn font-size20 ${viewMode.recordType === 'form' ? 'active-item' : ''}`}>表单模式</View>
                            </View>
                        </View>
                    </View>
                </View>

                <View className="info-label">应用设置</View>
                <View className="info-card card-background">
                    <View className="info-card-item flex-row flex-item">
                        <Text className="info-card-item-icon font-size40 first-item iconfont icon-laba"></Text>
                        <View className="info-card-item-content flex1">
                            <View className="info-item-content-title font-size24">记账通知</View>
                            <View className="flex-row flex-item">
                                <View className="info-item-content-desc font-size20 flex1">
                                    是否通知其他成员
                                </View>
                                <View onClick={switchMessageMode} className={`oprate-btn font-size20 ${currentCountMember?.notice ? 'active-item' : ''}`}>
                                    {currentCountMember?.notice ? '已开启' : '未开启'}
                                </View>
                            </View>
                        </View>
                    </View>
                    <View className="bottom-line"></View>
                    <View className="info-card-item flex-row flex-item">
                        <Text className="info-card-item-icon font-size40 second-item iconfont icon-zhendong"></Text>
                        <View className="info-card-item-content flex1">
                            <View className="info-item-content-title font-size24">振动反馈</View>
                            <View className="flex-row flex-item">
                                <View className="info-item-content-desc font-size20 flex1">
                                    操作时的手机是否振动反馈
                                </View>
                                <View onClick={switchShakeMode} className={`oprate-btn font-size20 ${viewMode?.shakeAvailable ? 'active-item' : ''}`}>
                                    {viewMode?.shakeAvailable ? '已开启' : '未开启'}
                                </View>
                            </View>
                        </View>
                    </View>
                    <View className="bottom-line"></View>
                    <View className="info-card-item flex-row flex-item">
                        <Text className="info-card-item-icon font-size40 third-item iconfont icon-zhuti"></Text>
                        <View className="info-card-item-content flex1">
                            <View className="info-item-content-title font-size24">主题模式</View>
                            <View className="flex-row flex-item">
                                <View className="info-item-content-desc font-size20 flex1">
                                    一键切换应用主题
                                </View>
                                <View onClick={() => setTheme('night')} className={`oprate-btn font-size20 ${viewMode.isNight && !viewMode.isFllow ? 'active-item' : ''}`}>深色</View>
                                <View onClick={() => setTheme('day')} className={`oprate-btn font-size20 ${!viewMode.isNight && !viewMode.isFllow ? 'active-item' : ''}`}>浅色</View>
                                <View onClick={() => setTheme('fllow')} className={`oprate-btn font-size20 ${viewMode.isFllow ? 'active-item' : ''}`}>随微信</View>
                            </View>
                        </View>
                    </View>
                    <View className="bottom-line"></View>
                    <View className="info-card-item flex-row flex-item">
                        <Text className="info-card-item-icon font-size40 fourth-item iconfont icon-zhiwen"></Text>
                        <View className="info-card-item-content flex1">
                            <View className="info-item-content-title font-size24">身份验证</View>
                            <View className="flex-row flex-item">
                                <View className="info-item-content-desc font-size20 flex1">
                                    请选择操作类型
                                </View>
                                <View onClick={switchIdentityCheck} className={`oprate-btn font-size20  ${user.info?.identityCheck ? 'active-item' : ''}`}>
                                    {user.info?.identityCheck ? '已开启' : '未开启'}
                                </View>
                            </View>
                        </View>
                    </View>
                    <View className="bottom-line"></View>
                    <View className="info-card-item flex-row flex-item">
                        <Text className="info-card-item-icon font-size40 first-item iconfont icon-zitidaxiao"></Text>
                        <View className="info-card-item-content flex1">
                            <View className="info-item-content-title font-size24">字体大小</View>
                            <View className="flex-row flex-item">
                                <View className="info-item-content-desc font-size20 flex1">
                                    切换全局字体大小
                                </View>
                                <View onClick={() => setfontSize('mini')} className={`oprate-btn font-size20 ${viewMode.fontSize === 'mini' ? 'active-item' : ''}`}>小</View>
                                <View onClick={() => setfontSize('medium')} className={`oprate-btn font-size20 ${viewMode.fontSize === 'medium' ? 'active-item' : ''}`}>中</View>
                                <View onClick={() => setfontSize('great')} className={`oprate-btn font-size20 ${viewMode.fontSize === 'great' ? 'active-item' : ''}`}>大</View>
                            </View>
                        </View>
                    </View>
                </View>
                <View className="info-card card-background">
                    <View className="info-card-item flex-row flex-item" onClick={loginOut}>
                        <Text className="info-card-item-icon font-size40 fourth-item iconfont icon-base-exit"></Text>
                        <View className="info-card-item-content flex1">
                            <View className="info-item-content-title font-size24">退出登录</View>
                            <View className="info-item-content-desc font-size20">
                                清除登录信息并退出
                            </View>
                        </View>
                        <View className="to-more-btn font-size32 iconfont icon-base-right"></View>
                    </View>
                </View>
            </View>
        </Page>
    )
})
export default Mine